{% extends "booking/base_site.html" %}
{% block title %}Calendrier{% endblock %}

{% block jquery_ui_lib %}
	{% load jquery %}

	<script type="text/javascript" src="{% jq_ui_base %}ui.core.js"></script>          
	<script type="text/javascript" src="{% jq_ui_base %}ui.selectable.js"></script>          
{% endblock %}


{% block extrastyle %}
{{ block.super }}
<style>
	ul.calendar { list-style: none; padding: 2px 1px; }
	ul.calendar .ui-selected { border: 1px solid #727EA3; color: #A00; padding: 1px; }
	.daytag { background: #727EA3; color: #FFF; }
	ul.calendar .ui-selecting { border: 1px solid #727EA3; padding: 1px; }
	ul.calendar li { background: #DFDFDF; width: 38px; margin: 2px; font-size: 10px; font-family: Arial; padding: 2px; }
	ul.myList li { text-align:right; cursor:n-resize; }
	ul.disp li { background: #FFFFFF; margin: 1px; padding: 2px 0 1px 0; }
	ul.calendar li.dw-6, ul.calendar li.dw-5 { background: #BFBFBF; }
    li.edition, span.edition { display:none; }
    li.confirm, span.confirm { display:none; }
</style>
{% endblock %}


{% block jq_document_ready %}
    $(".myList").selectable({
        stop: function(ev, ui) {
            days = $.map( $(".ui-selected").get(), function(e, i) {
              return e.id;
              });
            days_selected = days.join(',');
            $(".selection").slideUp("slow");
            $(".edition").slideDown("slow");
        }
    });
{% endblock %}

{% block header_site %}
<h1><a href="http://wp-themes.com/">Booking</a></h1>
<div>A django-booking demo</div>

<script type="text/javascript">
{% block on_check %}
var days_selected = "";
var item_id;

function filter(item) {
    $(".edition").slideUp("slow");
    $(".confirm").slideDown("slow");
    item_id = item.id;
}

function confirm() {
    $(".confirm").slideUp("slow");
	document.location.href = 'set/'+item_id+'/'+days_selected;
}

{% endblock %}
</script>

{% endblock %}


{% block frame %}
<div class="news" id="post-19">
	<div class="top"><h2>
		{{ yeartable.year }}
		<span>&nbsp;dernière mise à jour: {{ date_update|date:"d M Y , G:i" }}</span>
	</h2></div>
	<div class="midTop"></div>
	<div class="mid">

<table border="0" cellpadding="0" cellspacing="0">
<tbody>
{% for row in yeartable.format %}
<tr>
	{% for m in row %}
	<td valign="top" width=42px>
		<ul class="calendar myList">
	    {{ m.label }}
		{% for d in m.days %}
		    <li class="dw-{{ d.dayweek }}" id="{{ d.tag_id }}">{{ d }}</li>
		{% endfor %}
		</ul>
	</td>
	<td valign="top"  width=42px>
		<ul class="calendar disp">
	   &nbsp;
		{% for d in m.days %}
		    <li> {{ d.span_color_list|safe }}</li>
		{% endfor %}
		</ul>
	</td>
	{% endfor %}
</tr>
{% endfor %}
</tbody>
</table>

	</div>
	<div class="midBot"></div>
	<div class="bot">
	<a href=../{{ yeartable.year|add:"-1" }}/>{{ yeartable.year|add:"-1" }}</a> | <b>{{ yeartable.year }}</b> | <a href=../{{ yeartable.year|add:"1" }}/>{{ yeartable.year|add:"1" }}</a>
	</div>
</div>

{% endblock %}


{% block sidebar %}
<ul>
	{% for f in bookables_by_family %}
		{% if f.items %}
			<li><h2>{{ f.name }}</h2>
			<ul>
			{% for ob in f.items %}
				<li>
					<span style="background:{{ ob.color }}">&nbsp;</span>
					{% if ob.editable %}
					  <input id={{ ob.pk }} type=checkbox {{ ob.checked }} onchange='filter(this)'>
					{% endif %}
					{{ ob.name }}
				</li>
			{% endfor %}
			</ul>
			</li>
		{% endif %}
	{% endfor %}

	{% block edition %}
	<li class="selection">
		<h2>Sélection</h2>
		<ul><li>
		Vous pouvez maintenant sélectionner une période par un
		glisser/déplacer de la souris. Il est également possible de sélectionner
		plusieurs périodes sur des mois différents.
		</li></ul>
	</li>
	<li class="edition">
		<h2>Edition</h2>
		<ul><li>
		Vous venez de sélectionner une période. Vous pouvez maintenant
		affecter cette période à un item dans une des boites ci-dessus.
		</li></ul>
	</li>
	<li class="confirm">
		<h2>Confirmer</h2>
		<ul><li><a href=# onclick='confirm()'>Confirmer l'affectation</a></li>
		<li><a href=.>Annuler</a></li>
		</ul>
	</li>
	{% endblock %}

	
</ul>
{% endblock %}
